<template>
  <button @click="doChange">改变foo</button>
  <input
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  props: {
    foo: Number,
    firstName: String,
    lastName: String,
    modelValue: String,
    modelModifiers: {
      default: () => {},
    },
    fooModifiers: {
      default: () => {},
    },
  },
  created() {
    console.log("this.modelModifiers", this.modelModifiers);
    console.log("this.fooModifiers", this.fooModifiers);
  },
  methods: {
    doChange() {
      this.$emit("update:foo", this.count++);
    },
  },
};
</script>

<style>
</style>